<template>
  <div class="search-box">
    <div class="search-box-main flex-box">
      <input type="text" id="search-main" placeholder="输入问题搜索" ref="inputBox">
      <button @click="goBack" id="search-icon">取消</button>
    </div>
    <div class="search-lists">
      <h4>热门搜索</h4>
      <ul class="list-line">
        <li v-for="(item,index) in lists" :key='index' data-id="5">
          <span><svg class="icon" aria-hidden="true"><use xlink:href="#icon-wenzheng-historyx"></use></svg></span>
          <p>{{item}}</p>
          <button class="close-btn" @click="removeItem(index)">✕</button>
        </li>
      </ul>
      <ul class="list-icon flex-box">
        <li v-for="(item,index) in listsHot" :key="index"><router-link to="/">{{item}}</router-link></li>
      </ul>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
export default {
  name: 'home',
  data() {
    return {
      lists: ['皮肤科1', '皮肤科2'],
      listsHot: ['无创', '发烧', '辅食', '爱哭', '喂奶', '红屁股', '基因检测']
    }
  },
  computed: {},
  methods: {
    goBack() {
      this.$router.go(-1)
    },
    removeItem(index) {
      this.lists.splice(index, 1)
    }
  },
  mounted() {
    this.$refs.inputBox.focus()
    $(document).click(() => {
      this.$refs.inputBox.focus()
    })
  }
}
</script>
<style lang="scss" scoped>
.search-box {
  width: 100%;
  border-top: 1px solid #eee;
  z-index: 99;
  text-align: left;
  #search-icon {
    width: auto;
    opacity: 1;
    position: relative;
    width: 48px;
  }
  .search-box-main {
    max-width: 750px;
    height: 100%;
    margin: 0 auto;
    padding: 8px 15px;
    box-sizing: border-box;
    justify-content: space-between;
    background: #f7f7f7;
    -webkit-justify-content: space-between;
    input {
      width: 100%;
      height: r(30);
      padding-left: 10px;
      padding-right: 10px;
      border: 1px solid #eee;
      border-radius: 100px;
      margin: 0;
      margin-right: r(2);
      font-size: r(14);
      color: #ccc;
      float: left;
      transition: 0.25s ease;
      -webkit-transition: 0.25s ease;
    }
    button {
      width: 0;
      background: none;
      border: none;
      padding: 0;
      overflow: hidden;
      font-size: r(16);
      color: #6dbbfe;
      transition: 0.25s ease;
      -webkit-transition: 0.25s ease;
    }
  }
  .search-lists {
    max-width: 750px;
    margin: 0 auto;
    padding-left: r(15);
    padding-right: r(15);
    box-sizing: border-box;
    h4 {
      font-size: r(12);
      color: #999999;
      margin-top: r(10);
      line-height: r(36);
      border-bottom: 1px solid #eee;
    }
    ul.list-icon {
      flex-wrap: wrap;
      -webkit-flex-wrap: wrap;
      justify-content: space-between;
      -webkit-justify-content: space-between;
      li {
        float: left;
        border: 1px solid #ccc;
        border-radius: 40px;
        width: 30%;
        margin-top: r(15);
        font-size: r(14);
        text-align: center;
        a {
          padding-top: r(7);
          padding-bottom: r(7);
          color: #666666;
          width: 100%;
          display: block;
        }
      }
    }
    ul.list-line {
      width: 100%;
      overflow: hidden;
      margin-bottom: r(10);
      li {
        width: 100%;
        float: left;
        line-height: r(48);
        border-bottom: 1px solid #eee;
        span {
          float: left;
          color: #bbb;
          font-size: r(18);
        }
        p {
          float: left;
          font-size: r(14);
          color: #666666;
          margin-left: r(10);
        }
        button {
          float: right;
          border: none;
          outline: none;
          font-size: r(18);
          color: #bbb;
          background: none;
          margin-top: r(6);
        }
      }
    }
  }
}
</style>
